import React,{Component} from "react"
import './MultiSelect.css'
class App extends Component{
     constructor(){
          super();
          this.state={
              checkVal:[]
          }
     }
     render(){
          let {checkVal} = this.state
          return(
              <div>
                   <p>
                        <input type="checkbox"  value="sun" onChange={this.handelCheckbox.bind(this)}  />sun
                   </p>
                   <p>
                        <input type="checkbox"  value="moon" onChange={this.handelCheckbox.bind(this)}  />moon
                   </p>
                   <p>
                        <input type="checkbox"  value="star" onChange={this.handelCheckbox.bind(this)}  />star
                   </p>
                   
                                    <p>您选择的爱好为:{checkVal.map((item,index)=>{
                                        return <li key={index}>{item}</li>
                                })}</p>
              </div>
              
              
          )
     }
     handelCheckbox(e){
          let val = e.target.value
          let arr = this.state.checkVal
          let bstop = arr.includes(val)
          
          if(bstop){
              let index = arr.indexOf(val)
              arr.splice(index,1)
          }else{
              arr.push(val)
          }
          this.setState({
              checkVal:arr
          },()=>{
              console.log(this.state.checkVal)
          })
     }
}
export default App